<template>
  <div class="searchbar" style="display:flex; gap: 8px; align-items: center;">
    <input class="input" :value="modelValue" :placeholder="placeholder" @input="onInput" @keydown.enter="onEnter" />
    <button class="btn" :disabled="loading" @click="$emit('search')">{{ loading ? '搜索中...' : '搜索' }}</button>
  </div>
  
</template>

<script>
export default {
  name: 'SearchBar',
  props: {
    modelValue: { type: String, default: '' },
    loading: { type: Boolean, default: false },
    placeholder: { type: String, default: '输入名称进行模糊查询' }
  },
  emits: ['update:model-value', 'search'],
  setup(props, { emit }) {
    const onInput = (e) => emit('update:model-value', e.target.value)
    const onEnter = () => emit('search')
    return { onInput, onEnter }
  }
}
</script>

